<template>
    <div id="leftMenu">
        <el-menu
                @select="menuSelected"
                :default-active="defaultActive"
                class="el-menu-list"
                :collapse="menuCollapse"
                :unique-opened="true"
                router
        >
            <!--多级菜单,自循环-->
            <MenuItem
                    v-for="item in menuList"
                    :key="item.id"
                    :item="item"
            >
            </MenuItem>
        </el-menu>
    </div>

</template>
<script lang="ts" setup>
    import {computed, onMounted, ref} from 'vue'
    import store from "@/store";
    import {SysMenuTree} from "@/api/sys/SysMenuApi";
    import MenuItem from './menu-item.vue'
    import router from "@/router";
    import {getMenuByPath, changeNavMenu} from "@/common/MenuUtils";

    let defaultActive = ref(0 + '');
    let menuList = computed<SysMenuTree[]>(() => {
        let allMenuList = computed<SysMenuTree[]>(() => store.state.localStorage.menuList)
        let showHeaderMenu = computed<boolean>(() => store.getters["localStorage/showHeaderMenu"]());
        if (!showHeaderMenu.value) {
            return allMenuList.value;
        } else {
            for (const sysMenuTree of allMenuList.value) {
                if (sysMenuTree.isHeaderActive) {
                    return sysMenuTree.children;
                }
            }
            return allMenuList.value[0].children;
        }
    });
    let menuCollapse = computed<boolean>(() => store.state.localStorage.menuCollapse);

    let menuSelected = (path) => {
        changeNavMenu(path)
    }
    onMounted(() => {
        //当前路径展开菜单
        defaultActive.value = router.currentRoute.value.path;
    })
</script>
<script lang="ts">
    export default {
        name: 'HomeLeft',
    }

</script>
<style>
    #leftMenu .el-menu:not(.el-menu--collapse) {
        width: 200px;
    }

    #leftMenu .el-menu {
        font-weight: bold;
        border-right: 0px !important;
        width: auto;
        min-width: 64px;
    }

    #leftMenu .el-menu-item.is-active {
        background-color: #d9ecff !important;
        color: #337ecc;
    }

    /*

    #leftMenu .is-active > div:first-of-type {
        color: cornflowerblue !important;
    }

    */

    .el-menu-item:hover, .el-sub-menu__title:hover {
        background: transparent !important;
    }

    #leftMenu .el-sub-menu, #leftMenu .el-menu-item {
        user-select: none;
    }
</style>
